<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0;padding:0}
        #box{border-top:4px solid cornflowerblue;
            border-left:4px solid cornflowerblue;
            width:680px;
            background:lightpink;
            padding-left:20px;
            position:relative;
        }
        h2{
            display:block;
            height:50px;
            width:70px;
            line-height:50px;
            font-size:16px;
            color:#552211;
            border-bottom:2px solid #552211;
        }
        #textar{
            margin:20px 0;
            width:660px;
            height:100px;
            background:url("images/m.jpg");
            background-size:660px 100px;
        }
        #text{width:502px;
            height:62px;
        }
        #fabu{
            display:block;
            position:absolute;
            left:587px;
            top:141px;
            width:89px;
            height:30px;
            background:#e6b85c;
        }
        ul{ width:660px;list-style:none}
        ul li{
            width:660px;
            height:100px;
            margin:10px 0;
            position:relative;
            overflow:hidden;
        }

        ul li div:nth-of-type(1){display:block;
            float:left;
            width:50px;
            height:50px;
        background:url("images/a7.jpg") no-repeat;
        background-size:cover}
        ul li div:nth-of-type(2){
            width:580px;
            float:right;
            height:94px;
            border:3px solid #ccc;
            border-radius:5px;
        }
        ul li div:nth-of-type(2) span:nth-of-type(1){
            position:absolute;
            color:red;
            top:3px;
            left:80px;
        }
        ul li div:nth-of-type(2) span:nth-of-type(2){
            position:absolute;
            top:26px;
            left:119px;
        }
        ul li div:nth-of-type(2) span:nth-of-type(3){
            position:absolute;
            top:70px;
            left:120px;
        }
        ul li div:nth-of-type(2) span:nth-of-type(4){
            position:absolute;
            top:70px;
            left:180px;
        }
        ul li div:nth-of-type(2) a:nth-of-type(1){
            position:absolute;
            top:70px;
            left:540px;
            font-style:normal;
        }
        ul li div:nth-of-type(2) a:nth-of-type(2){
            position:absolute;
            top:70px;
            left:600px;
        }
        a{cursor:pointer;}
        ul li div:nth-of-type(2) textarea{
            margin-left:42px;
            margin-top:23px;
            width:400px;
            height:40px;
            display:none;
        }
#box a{
    position:absolute;
    right:0px;
    top:10px;
    color:#522f9a;
    text-decoration:none;
    padding-right:10px;
}
    </style>
</head>
<body>
<div id="box">
    <h2>我的说说</h2>
    <a id="myname">欢迎登录</a>
    <hr/>
    <div id="textar">
        <textarea id="text"></textarea>
        <button id="fabu">发布</button>
    </div>
    <h2 style="margin-bottom:0;width:200px">我的说说&nbsp;&nbsp;&nbsp;&nbsp;定时说说</h2><hr>
    <ul id="oul"></ul>
</div>
</body>
</html>
<script src="js/ajax.js"></script>
<script src="js/my.js"></script>
<script>
    //获取data.json的数据，并加载在ul列表中
    ajax('data.json',function(data){
        data=JSON.parse(data);
        for(var i=0;i<data.length;i++){
            var li=document.createElement('li');
            oul.appendChild(li);
            var div1=document.createElement('div');
            li.appendChild(div1);
            var div2=document.createElement('div');
            li.appendChild(div2);
            var span=document.createElement('span');
            div2.appendChild(span);
            span.innerHTML=data[i]['id'];
            var span2=document.createElement('span');
            div2.appendChild(span2);
            span2.innerHTML=data[i]['content'];
            var span3=document.createElement('span');
            div2.appendChild(span3);
            span3.innerHTML=data[i]['comtcnt'];
            var span4=document.createElement('span');
            div2.appendChild(span4);
            span4.innerHTML=data[i]['likecnt'];
            var a1=document.createElement('a');
            div2.appendChild(a1);
            a1.innerHTML=data[i]['username'];
            var a2=document.createElement('a');
            div2.appendChild(a2);
            a2.innerHTML=data[i]['gai'];
        }
    })
    //点击发布
    document.getElementById('fabu').onclick=function(){
        //判断文本域是否为空，为空不发布
        if(document.getElementById('text').value==""){
            alert("发布内容不能为空");
        }
        else {
            var li=document.createElement("li");//创建li标签
            li.opacity=0;
            document.getElementById('oul').insertBefore(li,document.getElementsByTagName('li')[0]);
            var div1=document.createElement('div');
            li.appendChild(div1);              //将div1加入li中
            var div2=document.createElement('div');
            li.appendChild(div2);
            var span=document.createElement('span');
            div2.appendChild(span);
            span.innerHTML=qukey()+":";    //发布人名字
            var span2=document.createElement('span');
            div2.appendChild(span2);
            span2.innerHTML=document.getElementById('text').value;    //发布内容
            var span3=document.createElement('span');
            div2.appendChild(span3);
            var data=new Date();
            var str=data.getHours()+":"+data.getMinutes();
            span3.innerHTML=str;     //发布时间
            var span4=document.createElement('span');
            div2.appendChild(span4);
            span4.innerHTML="来自"+"iphone6";        //用户设备
            var a1=document.createElement('a');
            div2.appendChild(a1);
            a1.innerHTML="编辑";
            a1.name="bianji"
            var a2=document.createElement('a');
            div2.appendChild(a2);
            a2.innerHTML="删除";
            a2.name="shanchu"
            var texta=document.createElement('textarea');
            div2.appendChild(texta);
            document.getElementById('text').value="";


            //        li动画效果
            li.style.height="0px";
            li.style.opacity="0";
            animate(li,{
                "height":100,
                "opacity":1,
            });



            var oa=document.getElementsByName('bianji');
            var qa=document.getElementsByName('shanchu');

            //点击编辑
            for(var i=0;i<oa.length;i++){
                //排除法先去掉之前出现的编辑框
                oa[i].onclick=function(){
                    //排除法去掉之前所有的编辑文本域
                    for(var j=0;j<oa.length;j++){
                        oa[j].parentNode.lastChild.style.display="none";
                    }
                    this.parentNode.childNodes[1].innerHTML="";//先清空发布已内容
                    this.parentNode.lastChild.style.display="block";//显示文本域
                    //文本域失去焦点事件
                    this.parentNode.lastChild.onblur=function(){
                        this.parentNode.childNodes[1].innerHTML=this.value;//将文本域的内容赋给发布内容
                        this.parentNode.lastChild.style.display="none";//隐藏文本域
                    }
                }
            }
            //点击删除
            for(var i=0;i<qa.length;i++){
                qa[i].onclick=function(){
                    if(confirm("确定要删除吗？")){
                        this.parentNode.parentNode.outerHTML="";//删除li
                    }
                }
            }
        }
    }

//获取登录页面的值
function qukey(){
    var url=location.href;  //获取自己的url
    var str=url.split("?")[1];      //以？分割成两边，右边为所传的值
    var str2=str.split("=")[1];         //以“=”分割成两边，右边要获取的name
        return str2;
}

//获取登录页面所传的name并写在myname标签中
    document.getElementById('myname').innerText=qukey()+","+document.getElementById('myname').innerText;
</script>
